<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    /*
    1.1.对下面数组进行 排重 ，并按 升序 排序，代码尽量简练:
    const array = [ '2', 'b', '9','a','7','3','4','b','6', '4' ]; 

    2.CSS实现水平垂直居中布局(内框不定高宽)，可以用多个方案实现(知道几种写几种):
    原始文档流
    浮动
    定位
    flex，inline-block
    盒子模型

    3.写一个提取 URL 参数的 js 方法，例如：url="https://alibaba.com?a=1&b=2&c=3#/abc/def?a=2&b=3&c=4"
要求：只识别queryParam，排除 hash 的干扰
    

4.在 im 中，聊天内容经常会遇到给对方发送链接地址的情况，请编写一道正则表达式，最大限度的匹配对方聊天内容中的 url。
// 举例： // Apple says: 今天我淘到了一个宝贝，你也看一下感觉很适合你 https://detail.tmall.com/item.htm?id=577359445691&spm=a1z10.10649-b-s.0.0.335e225cy94dcW ，种草的话，下单吧！
要求：仅仅识别 tmall.com 以及 taobao.com 这两个域名下的链接

用例1
getUrlFromWords("Apple says: 今天我淘到了一个宝贝，你也看一下感觉很适合你 https://detail.tmall.com/item.htm?id=577359445691&spm=a1z10.10649-b-s.0.0.335e225cy94dcW ，种草的话，下单吧！") 
// 返回"https://detail.tmall.com/item.htm?id=577359445691&spm=a1z10.10649-b-s.0.0.335e225cy94dcW"

用例2
getUrlFromWords("Apple says: 今天我淘到了一个宝贝，你也看一下感觉很适合你 https://taobao.com/a.html?c=123#sss=123 ，种草的话，下单吧！") 
//返回
"https://taobao.com/a.html?c=123#sss=123"
    */
    // const array = ['2', 'b', '9', 'a', '7', '3', '4', 'b', '6', '4'];
    // const myHandler = function (arr) {
    //   return Array.from(new Set(arr)).sort()
    // }
    // console.log(myHandler(array));
    /*  function getParamFromURL(url, key) {
 
       // let url = 'https://alibaba.com?a=1&b=2&c=3#/abc/def?a=2&b=3&c=4'
       let temp = [];
       //(?<=y)x 匹配'x'仅当'x'前面是'y'.这种叫做后行断言。
       // ? 表0次或1次，需要使用\?转义为?字符串。
       // [&a-zA-Z0-9=]组成的多个字符串前是？时，匹配这些字符串。
       // let arr = url.match(/(?<=\?)[&a-zA-Z0-9=]+/)  // [a=1&b=2&c=3]
       let arr = url.match(/(?<=\?)[&a-zA-Z0-9=]+$/) //[a=2&b=3&c=4]
       // let arr = url.match(/(?<=\?)[&a-zA-Z0-9=]+/g)  //  ['a=1&b=2&c=3', 'a=2&b=3&c=4']
 
       // console.log(arr);
       temp = arr[0].split("&")
 
       // console.log(temp); // ['a=1', 'b=2', 'c=3'] => {a:1,b:2,c:3}
       // 再把数组，转换为对象
 
       let params = {}
       temp.forEach(el => {
         //el : 'a=1'
         let arr2 = el.split('=')
         // console.log(arr2); // ['a','1']
         params[arr2[0]] = arr2[1]
       })
       // console.log(params); //{a: '1', b: '2', c: '3'}
       return params[key]
 
     }
 
     let v = getParamFromURL('https://alibaba.com?a=1&b=2&c=3#/abc/def?a=2&b=3&c=4', 'b')
     console.log(v); */

    function getUrlFromWords(text) {
      // .  任意的字符
      // * 匹配前一个表达式 0 次或多次。
      // x(?=y) 匹配'x'仅仅当'x'后面跟着'y'.这种叫做先行断言。
      let arr = text.match(/https:\/\/.*(tmall|taobao)\.com.*(?=\s)/g)
      console.log(arr);  //['https://taobao.com/a.html?c=123#sss=123'] 或 null
      if (arr) return arr[0]
      return '';
    }
    let url = 'Apple says: 今天我淘到了一个宝贝，你也看一下感觉很适合你 https://detail.tmall.com/item.htm?id=577359445691&spm=a1z10.10649-b-s.0.0.335e225cy94dcW ，种草的话，下单吧！'
    let url2 = 'Apple says: 今天我淘到了一个宝贝，你也看一下感觉很适合你 https://taobao.com/a.html?c=123#sss=123 ，种草的话，下单吧！'

    console.log(getUrlFromWords(url));  // 'https://detail.tmall.com/item.htm?id=577359445691&spm=a1z10.10649-b-s.0.0.335e225cy94dcW'
    console.log(getUrlFromWords(url2));  //https://taobao.com/a.html?c=123#sss=123
    
    let url3 = "Apple says: 今天我淘到了一个宝贝，你也看一下感觉很适合你 https://qq.com/a.html?c=123#sss=123 ，种草的话，下单吧！"
    console.log(getUrlFromWords(url3));  // ''


    console.log(url.replace(/https:\/\/.*(tmall|taobao)\.com.*(?=\s)/g, '*')); //Apple says: 今天我淘到了一个宝贝，你也看一下感觉很适合你 * ，种草的话，下单吧！
  </script>
</body>

</html>